<template>
    <div class="chart-container">
      <h2 class="chart-title">衣服可视化展示</h2>
      <a-button type="primary" @click="handleGoHome" style="margin-right: 16px">主界面</a-button>
      <div class="chart-row">
        <div ref="barChart1" class="chart"></div>
        <div ref="barChart2" class="chart"></div>
      </div>
      <div class="chart-row-mid">
        <!-- <div ref="lineChart" class="chart"></div> -->
        <div ref="pieChart" class="chart"></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  export default {
  data() {
    return {
      barChart1Instance: null,
      barChart2Instance: null,
      // lineChartInstance: null,
      pieChartInstance: null
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.barChart1Instance = echarts.init(this.$refs.barChart1);
      this.wordCloudChartInstance = echarts.init(this.$refs.barChart2);
      this.pieChartInstance = echarts.init(this.$refs.pieChart);

      // 模拟数据
      const count = [111, 353, 405, 238, 193, 99, 239, 188, 95, 77, 140, 193];
      const shopFreq = [
        { 'name': '夹克', 'value': 853 },
        { 'name': '休闲裤', 'value': 373 },
        { 'name': '男士T恤', 'value': 300 },
        { 'name': '卫衣', 'value': 127 },
        { 'name': '衬衫', 'value': 104 },
        { 'name': '服饰', 'value': 79 },
        { 'name': '羽绒服', 'value': 78 },
        { 'name': '牛仔裤', 'value': 70 },
        { 'name': '休闲棉袜', 'value': 35 },
        { 'name': '针织衫', 'value': 33 },
        { 'name': '保暖内衣', 'value': 22 },
        { 'name': '秋衣秋裤', 'value': 19 },
        { 'name': '羊毛衫', 'value': 19 },
        { 'name': '睡衣/家居服', 'value': 17 },
        { 'name': '棉服', 'value': 13 },
        { 'name': '毛呢大衣', 'value': 13 },
        { 'name': 'POLO衫', 'value': 12 },
        { 'name': '卫衣/套头衫', 'value': 11 },
        { 'name': '卫裤/运动裤', 'value': 10 },
        { 'name': '套装', 'value': 10 }
      ];

      const barOptions1 = {
        title: {
          show: true,
          text: '价格区间分布',
          textAlign: 'center',
          left: '50%',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['0-49', '49-99', '99-159', '159-199', '199-259', '259-299', '299-399',
           '399-499', '499-599', '599-699', '699-1000', '1000以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: count.map(value => ({
            value: value,
            itemStyle: {
              color: 'rgb(51, 102, 204)' // 柱状图颜色
            }
          })),
          type: 'bar'
        }],
        grid: {
          containLabel: true,
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      };
      this.barChart1Instance.setOption(barOptions1);
      const wordCloudOptions = {
        title: {
          show: true,
          text: '服装类型词云图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: shopFreq
      }]
    };
    this.wordCloudChartInstance.setOption(wordCloudOptions);
      const pieOptions = {
  title: {
    show: true,
    text: '服装风格',
    textAlign: 'center', 
    left: '50%', 
    top: 'bottom'
  },
  series: [{
    type: 'pie',
    data: [
    { 'name': '休闲风', 'value': 1004 },
    { 'name': '通勤风', 'value': 471 },
    { 'name': '百搭风', 'value': 226 },
    { 'name': '日韩风', 'value': 142 },
    { 'name': '运动风', 'value': 62 },
    { 'name': '潮流风', 'value': 48 },
    { 'name': '商务休闲', 'value': 45 },
    { 'name': '复古风', 'value': 43 },
    { 'name': '欧美风', 'value': 41 },
    { 'name': '简约风', 'value': 24 },
    { 'name': '军旅风', 'value': 15 },
    { 'name': '中国风', 'value': 14 },
    { 'name': '文艺风', 'value': 10 },
    { 'name': '韩版', 'value': 8 },
    { 'name': '基础大众', 'value': 8 },
    { 'name': 'oversize', 'value': 4 },
    { 'name': '商务正装', 'value': 3 },
    { 'name': '港风', 'value': 3 },
    { 'name': '街头风', 'value': 2 },
    { 'name': '基础大众，商务休闲', 'value': 2 }
    ]
  }],
  tooltip: {
    trigger: 'item', // 触发方式为项数据触发
    formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示信息格式化
  }
};
this.pieChartInstance.setOption(pieOptions);


    },
    handleGoHome() {
      this.$router.push('/home');
  }
  }
  
};

  </script>
  
  <style>
  .chart-container {
    width: 90vw;
	height: 100vh;
    background-image: url('/assets/image/filebg.jpg'); 
    background-size: cover;
    padding: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .chart-row-mid {
  display: flex;
  justify-content: center;
}
  
  .chart {
  width: 48%;
  height: 300px;
  background-color: white;
}
.el-select__placeholder {
  width: 200px;
  margin: 0 auto;
}

</style>

